<template>
  <base-layout>
    <div class="oj-container">
      <!-- 顶部统计卡片 -->
      <a-row :gutter="16" class="stats-row">
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="已解决题目"
              :value="stats.solved"
              :value-style="{ color: '#3f8600' }"
            >
              <template #suffix>
                <span class="stats-total">/ {{ stats.total }}</span>
              </template>
            </statistic>
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="通过率"
              :value="stats.acceptRate"
              :precision="1"
              suffix="%"
              :value-style="{ color: '#cf1322' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="连续打卡"
              :value="stats.streak"
              suffix="天"
              :value-style="{ color: '#1890ff' }"
            />
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card class="stats-card">
            <statistic
              title="获得积分"
              :value="stats.points"
              :value-style="{ color: '#722ed1' }"
            />
          </a-card>
        </a-col>
      </a-row>

      <!-- 题目列表卡片 -->
      <a-card class="problem-list-card">
        <a-tabs v-model:activeKey="activeTab">
          <a-tab-pane key="problems" tab="题目列表">
            <problem-list />
          </a-tab-pane>
          <a-tab-pane key="submissions" tab="我的答题记录">
            <submit-list />
          </a-tab-pane>
        </a-tabs>
      </a-card>
    </div>
  </base-layout>
</template>

<script>
import { ref } from 'vue'
import BaseLayout from '@/components/layout/BaseLayout.vue'
import { Statistic } from 'ant-design-vue'
import ProblemList from '@/components/oj/ProblemList.vue'
import SubmitList from '@/components/oj/SubmitList.vue'

export default {
  name: 'OJ',
  components: {
    BaseLayout,
    Statistic,
    ProblemList,
    SubmitList
  },
  setup() {
    const activeTab = ref('problems')
    
    // 统计数据
    const stats = ref({
      solved: 15,
      total: 100,
      acceptRate: 75.5,
      streak: 7,
      points: 1250
    })

    return {
      activeTab,
      stats
    }
  }
}
</script>

<style scoped>
.oj-container {
  padding: 24px;
  background: #f0f2f5;
  min-height: calc(100vh - 64px);
}

.stats-row {
  margin-bottom: 24px;
}

.stats-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.stats-total {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 4px;
}

.problem-list-card {
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 768px) {
  .oj-container {
    padding: 12px;
  }

  .stats-row {
    margin-bottom: 12px;
  }
}
</style>
